import { useEffect, useRef } from "react";
import BallCollisionControl from "./lib/ball-collision-control";

export default function BallCollision(): React.JSX.Element {
  const canvasRef = useRef(null)
  useEffect(() => {
    const control = new BallCollisionControl({
      element: canvasRef.current || document.body,
      number: 2,
      speed: .2,
      colorSet: ["#44b549", "#fff000", "#000fff", "#ff0000"],
      opacityRange: [.5, 1]
    }).install()
    return () => {
      control.uninstall()
    }
  }, [])
  return (
    <div className="size-full absolute-full flex-center">
      <div ref={canvasRef} className="w-[960px] h-[540px] bg-gray-400"></div>
    </div>
    
  );
}